<template>
  <div class="about">
    <h1>This is an about page</h1>
    <h2>{{ $store.state.findvuex.age }}</h2>
    <!-- <h2>{{ $route.params }}</h2>
    <h2>{{ $router.currentRoute.params }}</h2> -->
    <!-- <h2>{{ $route.query }}</h2> -->

   <!-- <h2>userId1122:{{ userId }}</h2> -->
    <!-- <h2>{{ a }}</h2> -->
    <h2>userId2233:{{ userId }}</h2>
    <h2>app：{{app.userId  }}-{{ app.name }}</h2>
  </div>
</template>
<script>
// @ is an alias to /src


export default {
  name: 'AboutView',
  // props:['userId'],
  // props:['a'],
  props:['userId'],
  inject:['app'],
  beforeRouteEnter(to, from, next) {
    console.log('toenter', to);
    console.log('fromenter', from);
    console.log('this',this);
    next()
  },
  beforeRouteUpdate(to, from, next) {
    console.log('toupdate', to);
    console.log('fromupdate', from);
    console.log('thisupdate',this);
    next()
  },
  // beforeRouteLeave(to, from, next) {
  //   console.log('toleave', to);
  //   console.log('fromleave', from);
  //   console.log('thisleave',this);
  //   const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
  // if (answer) {
  //   next()
  // } else {
  //   next(false)
  // }
  // },
  activated(){//只有keepalive存在的情况下才会触发activated()和deactivated()生命周期
    console.log('调用actived')
    document.title = this.$route.meta.title
  },
  deactivated(){
    console.log('调用deactivated')
  },
  created() {
    console.log('create');
  },
  mounted() {
    console.log('$route=>', this.$route);//当前活跃状态下的路由
    console.log('$router=>', this.$router);//代表的是整个的路由结构里面有一个currentRoute其实就是route
  },
  watch:{
    $route(to, from) {
      console.log('1111',to);
      console.log('2222',from);
    }
  }
}
</script>